<template>
  <el-dialog
    custom-class="preview-dialog"
    title=""
    :visible="previewVisible"
    :before-close="closed"
    :append-to-body="true"
    width="700px"
  >
    <div class="preview-wrap">
      <!-- :style="{ backgroundColor: config.color }" -->
      <div class="preview-content">
        <!-- <div class="preview-head">
          <div class="preview-header-title">{{ config.title }}</div>
        </div>
        <div class="preview-iframe">
          <div v-for="(item, index) of componentDatas" :key="index">
            <component :is="item.type" :value="item" />
          </div>
        </div>
        <div class="preview-footer"></div> -->
        <iframe :src="URL"></iframe>
      </div>
      <!-- 二维码 -->
      <div class="preview-code">
        <p class="shop-detail">手机扫码访问</p>
        <p class="weixin-title">微信“扫一扫”分享到朋友圈</p>
        <div class="qr-code" ref="qrCodeDiv" id="qrCode">
          <!-- <img
            src="https://h5.youzan.com/v2/common/url/create?type=feature&amp;alias=0AjWis2UvU&amp;kdt_id=90147852"
            width="158"
            height="158"
          /> -->
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import titleText from './titleText'
import goods from './goods'
import imageAd from './imageAd'
import imageTextNav from './imageTextNav'
import search from './search'
import white from './white'
import richText from './richText'
import notice from './notice'
import videoo from './videoo'
import cubeV3 from './cubeV3'
import shopBannerWeapp from './shopBannerWeapp'
import QRCode from 'qrcodejs2'

export default {
  components: {
    // titleText,
    // goods,
    // imageAd,
    // imageTextNav,
    // search,
    // white,
    // richText,
    // notice,
    // videoo,
    // cubeV3,
    // shopBannerWeapp
  },
  props: {
    previewVisible: {
      type: Boolean,
      default: false
    },
    componentss: {
      type: Array,
      default: () => []
    },
    URL: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      config: {},
      componentDatas: []
    }
  },
  watch: {
    componentss(newVal) {
      this.getData()
    },
    URL(newVal) {
      this.initQrcode()
    }
  },
  methods: {
    initQrcode() {
      document.getElementById('qrCode').innerHTML = '' //清空
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.URL,
        width: 158,
        height: 158,
        colorDark: '#333333', //二维码颜色
        colorLight: '#ffffff', //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
      })
    },
    closed() {
      this.$emit('closeDialog')
    },
    getData() {
      this.config = this.componentss[0]
      this.componentDatas = this.componentss.slice(1)
    }
  },
  created() {
    this.getData()
  },
  // mounted(){
  //   this.initQrcode()
  // }
}
</script>

<style lang="less">
.preview-dialog {
  .preview-wrap {
    width: 675px;
    display: flex;
  }
  overflow: hidden;
  .preview-content {
    width: 375px;
    height: 667px;
    background: white;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    // .preview-head {
    //   background-image: url(../assets/img/minihead.png);
    //   height: 64px;
    //   width: 375px;
    //   margin: 0 auto;
    //   background-repeat: no-repeat;
    //   background-size: cover;
    //   background-position: 50%;
    //   position: relative;
    //   .preview-header-title {
    //     width: 180px;
    //     margin: 0 auto;
    //     height: 34px;
    //     text-align: center;
    //     padding-top: 30px;
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    //     white-space: nowrap;
    //     user-select: none;
    //   }
    // }
    // .preview-iframe {
    //   position: absolute;
    //   top: 64px;
    //   left: 0;
    //   right: 0;
    //   bottom: 0;
    //   overflow: scroll;
    // }
    // .preview-iframe::-webkit-scrollbar {
    //   width: 0;
    //   height: 0;
    // }
    // .preview-iframe::-webkit-scrollbar-thumb {
    //   width: 0;
    // }
  }

  .preview-code {
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    width: 180px;
    height: 243px;
    margin: 20px 0 0 80px;
    .shop-detail {
      margin: 10px;
      padding-bottom: 10px;
      font-size: 12px;
      color: #666;
      border-bottom: 1px dashed #ccc;
      line-height: 1.6;
      text-align: center;
    }
    .weixin-title {
      font-size: 12px;
      color: #666;
      margin: 5px 0;
      text-align: center;
    }
    .qr-code {
      margin: 0;
      min-height: 172px;
      text-align: center;
      img {
        // width: 158px;
        // height: 158px;
        margin: 0 auto;
      }
    }
  }
}
</style>
